<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>第一个数分子</p>
		<input id="FirstZi" type="number"/>
		<p>第一个数分母</p>
		<input id="FirstMu" type="number"/>
		<p>第二个数分子</p>
		<input id="SecondZi" type="number"/>
		<p>第二个数分母</p>
		<input id="SecondMu" type="number"/>
		<p></p>
		<input type="button" value="+" onclick="jisuan('+')"/>
		<input type="button" value="-" onclick="jisuan('-')"/>
		<input type="button" value="*" onclick="jisuan('*')"/>
		<input type="button" value="/" onclick="jisuan('/')"/>
		<p></p>
		<input type="text" id="result" readonly/>
		<script type="text/javascript">
			var onezi=parseInt(document.getElementById("FirstZi"));
			var onemu=parseInt(document.getElementById("FirstMu"));
			var twozi=parseInt(document.getElementById("SecondZi"));
			var twomu=parseInt(document.getElementById("SecondMu"));
			var resultStr;
			function gcd(x , y)
			{
			    if(x % y === 0)
				{
			        return y ;
			    }
			    return gcd(y , x % y)
	        }
			function jisuan(type)
			{
				var resultText=document.getElementById("result");
				switch(type)
				{
					case '+':
						onezi=onezi*twomu;
						twozi=twozi*onemu;
						var newzi=onezi+twozi;
						var newmu=onemu*twomu;
						var temp=newzi;
						resultText.value=temp;
						newzi=newzi/gcd(newzi,newmu);
						newmu=newmu/gcd(temp,newmu);
						break;
				}
				resultStr=toString(newzi)+'/'+toString(newmu);
				resultText.value=resultStr;
			}
		</script>
	</body>
</html>